<template>
  <div class="app-container">
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>发货订单详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回列表</el-button>
      </div>
      <el-descriptions title="基础信息" :column="2" border>
        <el-descriptions-item label="订单ID">{{ orderDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="getOrderStatusType(orderDetail.orderStatus)">
            {{ getOrderStatusText(orderDetail.orderStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="项目名称">{{ orderDetail.projectName }}</el-descriptions-item>
        <el-descriptions-item label="发货时间">{{ orderDetail.deliveryDate | formatDate }}</el-descriptions-item>
        <el-descriptions-item label="中英文支持">
          <el-tag size="medium" :type="orderDetail.supportMultilang ? 'success' : 'info'">
            {{ orderDetail.supportMultilang ? '支持' : '不支持' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否正版">
          <el-tag size="medium" :type="orderDetail.isGenuine ? 'success' : 'danger'">
            {{ orderDetail.isGenuine ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-divider></el-divider>

      <el-descriptions title="客户信息" :column="2" border>
        <el-descriptions-item label="甲方地址" :span="2">{{ orderDetail.clientAddress }}</el-descriptions-item>
        <el-descriptions-item label="甲方联系人">{{ orderDetail.clientContact }}</el-descriptions-item>
        <el-descriptions-item label="甲方电话">{{ orderDetail.clientPhone }}</el-descriptions-item>
        <el-descriptions-item label="发货公司名称" :span="2">{{
            orderDetail.companyName || '无'
          }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider></el-divider>

      <el-descriptions title="软件信息" :column="2" border>
        <el-descriptions-item label="加密狗序列号">{{ orderDetail.usbKeySerial || '无' }}</el-descriptions-item>
        <el-descriptions-item label="正版激活码" v-if="orderDetail.isGenuine">
          {{ orderDetail.genuineActivationCode || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="软件名称备注" v-if="!orderDetail.isGenuine">{{
            orderDetail.softwareNote || '无'
          }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider></el-divider>

      <el-descriptions title="负责人信息" :column="2" border>
        <el-descriptions-item label="项目负责人">{{ orderDetail.leaderName }}</el-descriptions-item>
        <el-descriptions-item label="负责人部门">{{ orderDetail.leaderDepartment }}</el-descriptions-item>
        <el-descriptions-item label="发货用途">{{ orderDetail.deliveryPurpose }}</el-descriptions-item>
        <el-descriptions-item label="原始订单ID" v-if="orderDetail.deliveryPurpose === '补充发货'">
          {{ orderDetail.originalOrderId }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider></el-divider>

      <template v-if="orderDetail.isAbnormalDelivery">
        <el-descriptions title="异常发货信息" :column="1" border>
          <el-descriptions-item label="异常原因">{{ orderDetail.abnormalReason }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
      </template>

      <h3>附件列表</h3>
      <div v-if="fileList.length > 0">
        <div v-for="(file, index) in fileList" :key="index" class="file-item">
          <a :href="file.url" target="_blank">{{ file.name }}</a>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无附件"></el-empty>
      </div>

      <el-divider></el-divider>

      <div class="action-buttons">
        <el-button type="primary" @click="handleEdit" :disabled="orderDetail.orderStatus === 1">编辑</el-button>
        <el-button type="danger" @click="handleDelete" :disabled="orderDetail.orderStatus === 1">删除</el-button>
        <template v-if="hasAdminPermission && orderDetail.orderStatus !== 1">
          <el-button type="success" @click="handleAudit(1)">审核通过</el-button>
        </template>
        <template v-if="hasAdminPermission && orderDetail.orderStatus === 1">
          <el-button type="warning" @click="handleAudit(0)">撤销审核</el-button>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getDeliveryOrderDetail, deleteDeliveryOrder, auditOrderStatus} from '@/api/delivery';
import {parseTime} from '@/utils/time';

export default {
  name: 'DeliveryOrderDetail',
  filters: {
    formatDate(time) {

      return parseTime(time, '{y}-{m}-{d}');
    }
  },
  data() {
    return {
      loading: false,
      orderDetail: {},
      fileList: [],
      hasAdminPermission: false // 根据实际权限控制
    };
  },
  created() {
    this.getDetail();
    // 这里可以通过store或其他方式获取当前用户角色判断是否有管理员权限
    this.checkPermission();
  },
  methods: {
    getDetail() {
      const id = this.$route.params.id;
      if (!id) {
        this.$message.error('参数错误');
        this.goBack();
        return;
      }

      this.loading = true;
      getDeliveryOrderDetail(id).then(response => {
        this.orderDetail = response.data;

        // 处理附件列表
        if (this.orderDetail.attachmentPaths) {
          const paths = this.orderDetail.attachmentPaths.split(',');
          this.fileList = paths.map(path => {
            const name = path.substring(path.lastIndexOf('/') + 1);
            return {name, url: path};
          });
        }

        this.loading = false;
      }).catch(() => {
        this.loading = false;
        this.goBack();
      });
    },
    checkPermission() {
      // 实际项目中可以从用户权限中获取
      // 这里为了演示，默认设置为有管理员权限
      this.hasAdminPermission = true;
    },
    getOrderStatusType(status) {
      switch (status) {
        case 0:
          return 'warning';
        case 1:
          return 'success';
        case 2:
          return 'info';
        default:
          return 'info';
      }
    },
    getOrderStatusText(status) {
      switch (status) {
        case 0:
          return '待审核';
        case 1:
          return '已审核';
        case 2:
          return '已修改待审核';
        default:
          return '未知状态';
      }
    },
    handleEdit() {
      this.$router.push({path: `/delivery/edit/${this.orderDetail.id}`});
    },
    handleDelete() {
      this.$confirm('确认删除该发货订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeliveryOrder(this.orderDetail.id).then(response => {
          this.$message.success(response.msg || '删除成功');
          this.goBack();
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    handleAudit(status) {
      const statusText = status === 1 ? '审核通过' : '撤销审核';
      this.$confirm(`确认${statusText}该发货订单吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auditOrderStatus(this.orderDetail.id, status).then(response => {
          this.$message.success(response.msg || `${statusText}成功`);
          this.getDetail(); // 刷新详情
        });
      }).catch(() => {
        this.$message.info(`已取消${statusText}`);
      });
    },
    goBack() {
      this.$router.push({path: '/delivery/list'});
    }
  }
};
</script>

<style lang="scss" scoped>
.el-descriptions {
  margin-bottom: 20px;
}

.file-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;

  a {
    color: #409EFF;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
}
</style>
